@page "/MultiSelect-Dropdown/Selection-Limit"

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the maximum selection limit functionalities with checkbox of the MultiSelect. MultiSelect value can set restrictions based on the maximum selection length that can be selected.</p>
</SampleDescription>
<ActionDescription>
   <p>The MultiSelect has built-in support to limit the value selected in Multiselect component, when the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_MaximumSelectionLength' target='_blank'> MaximumSelectionLength</a> property is set as 3, maximum of only 3 value will be  selected in the MultiSelect.</p>
   <p>The selection limit sample illustrates  using the countries data. </p>
</ActionDescription>

<div class="control-section col-lg-12 selectionlimit">
    <div class="col-lg-9">
        <div class="content selectionlimit-multiselect">
            <SfMultiSelect @bind-Value="@MulVal" AllowFiltering="true" Placeholder="Select countries" Mode="@VisualMode.CheckBox" MaximumSelectionLength="@MaxSelection" DataSource="@Country" ShowDropDownIcon="true" PopupHeight="350px">
                <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
            </SfMultiSelect>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="content property-section">
            <table>
                <tr>
                    <td>
                        <div class="selectionText">Selection Limit </div>
                    </td>
                    <td>
                        <SfNumericTextBox @ref="NumericObj" TValue="int?" Width="100px" Format="n0" @bind-Value="@numericValue" Min=1 Max=18></SfNumericTextBox>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button class="e-btn apply-limit" @onclick="@ApplySelectionLimit">Apply</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code{

    public SfNumericTextBox<int?> NumericObj;

    public string[] MulVal = null;
    public int MaxSelection { get; set; } = 3;

    private int? numericValue = 3;
    public void ApplySelectionLimit(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        this.MulVal = new string[] { };
        MaxSelection = (int)(long)this.NumericObj.Value;
    }

    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    private List<Countries> Country = new List<Countries>
{
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };
}

<style>

    .control-section.selectionlimit {
        margin-top: 20px;
    }

    .selectionlimit-multiselect {
        width: 70%;
        margin-left: 70px;
    }

    .selectionText {
        margin: 10px;
        width: 100px;
    }

    .apply-limit {
        margin-top: 10px;
    }
</style>